function $(el){
  return document.querySelector(el)
}
function gets(el){
  return [...document.querySelectorAll(el)]
}
function zero(n){
  return n<10?'0'+n:n
}
gets('.tabs span').forEach((span,i)=>{
  span.addEventListener('click',()=>{
    $('.active').classList.remove('active')
    $('.show').classList.remove('show')
    span.classList.add('active')
    gets('.item')[i].classList.add('show')
  })
})

function render(method,url){
  return new Promise((resolve,reject)=>{
    let xhr = new XMLHttpRequest()
    xhr.open(method,url)
    xhr.onreadystatechange = ()=>{
      if(xhr.readyState === 4){
        if(xhr.status === 200){
          let data = JSON.parse(xhr.responseText)
          resolve(data)
        }
      }else{
        // reject(xhr)
      }
    }
    // if(method.toUpperCase() === 'POST'){
    //   xhr.setRequestHeader('Content-Type', 'application/json')
    //   xhr.send(JSON.stringify(body))
    // }
    // else{
      xhr.send()
    // }
  })
}
// 渲染推荐歌单
render('get','http://zyxcl.xyz/music/api/recommend/resource')
.then((data)=>{
  $('.content_top ul').innerHTML = data.recommend.map(item=>{
    return ` <li data-id=${item.id}>
                        <img src="${item.picUrl}" alt="">
                        <p>${item.name}</p>
                        <div><span class="iconfont icon-24gf-headphones"></span>${Math.round(item.playcount/10000)}万</div>
                    </li>`
  }).join('')
  gets('.content_top li').forEach((li,i)=>{
    li.addEventListener('click',()=>{
      let id = li.getAttribute('data-id')
      location.href =`./详情页.html?id=${id}`
    })
  })
})
.catch(error=>{
  console.log(error)
})
// 渲染推荐歌曲
render('get','http://zyxcl.xyz/music/api/recommend/songs')
.then(datas=>{
  $('.content_bottom ul').innerHTML = datas.data.dailySongs.map(item=>{
    return `<li data-id="${item.id}">
                <div>
                    <strong>${item.name}</strong>
                    <p><span></span>${item.ar.map(it1=>it1.name).join(' / ')}-${item.al.name}</p>
                </div>
                <span class="iconfont icon-bofang"></span>
            </li>`
  }).join('')
  let list = [...document.querySelectorAll('.content_bottom ul li')]
  list.forEach(li =>{
      li.addEventListener('click',e=>{
          let id = li.getAttribute('data-id')
          location.href = `./playsong.html?id=${id}`
      })
  })
})
.catch(error=>{
  console.log(error)
})
// content2内容
render('get','http://zyxcl.xyz/music/api/top/list?id=3778678')
.then(data=>{
  $('.content2 ul').innerHTML = data.playlist.tracks.splice(0,20).map((item,i)=>{
    return `<li data-id="${item.id}">
              <div>
                  <span>${zero(i+1)}</span>
                  <div>
                      <strong>${item.name}</strong>
                      <p>${item.ar.map(it=>it.name).join(' / ')}-${item.al.name}</p>
                  </div>
              </div>
              <span class="iconfont icon-bofang"></span>
            </li>`
  }).join('')
  let list = [...document.querySelectorAll('.content2 ul li')]
    list.forEach(li =>{
        li.addEventListener('click',e=>{
            let id = li.getAttribute('data-id')
            location.href = `./playsong.html?id=${id}`
        })
    })
})

// content3 内容
 // 历史记录
 let history = JSON.parse(localStorage.getItem('history')) || []
  function renderList() {
    if(history.length === 0) return $('.searchHistory ol').innerHTML =''
    $('.searchHistory ol').innerHTML = history.map(item => {
      return `<li>
                            <span></span>
                            <div>
                                <p>${item}</p>
                                <span>×</span>
                            </div>
                        </li>`
    }).join('')
    gets('.searchHistory ol div span').forEach((span,i)=>{
      span.addEventListener('click',()=>{
        history.splice(i,1)
        localStorage.setItem('history',JSON.stringify(history))
        renderList()
      })
    })
  }
  renderList()

$('.search input').addEventListener('input',()=>{
  let val = $('.search input').value.trim()
  if(val === '') {
    $('.hotSearch').style.display = 'block'
    $('.searchVal').style.display = 'none'
    $('.detail').innerHTML = ''
    return 
  }
   $('.searchVal').style.display = 'block'
  document.addEventListener('keydown',(e)=>{
    if(e.keyCode === 13){
      render('get',`http://zyxcl.xyz/music/api/search?keywords=${val}`)
      .then(datas=>{
        console.log(datas)
        const ul = $('.content3 .detail')
        ul.innerHTML = datas.result.songs.map((item,i)=>{
          return `<li>
                    <div>
                        <span>${i+1}</span>
                        <div>
                            <strong>${item.name}</strong>
                            <p>${item.artists[0].name}-${item.album.name}</p>
                        </div>
                    </div>
                    <span class="iconfont icon-bofang"></span>
                </li>`
        }).join('')
        ul.style.display = 'block'
        $('.searchVal').style.display = 'none'
        history.push(val)
        localStorage.setItem('history',JSON.stringify(history))
        renderList()
      })
    }
  })
 
  $('.hotSearch').style.display = 'none'
  render('get',`http://zyxcl.xyz/music/api/search/suggest?keywords=${val}&type=mobile`)
  .then(datas=>{
    console.log(datas)
    $('.searchVal').innerHTML = `<div class="val">搜索“${val}”</div>
                  <ul>${datas.result.allMatch.map(item=>{
                    return `<li><span></span>${item.keyword}</li>`
                  }).join('')}
                  </ul>`
  })
})
render('get','http://zyxcl.xyz/music/api/search/hot')
.then(datas=>{
  $('.content3 .hotSearch ul').innerHTML = datas.result.hots.map(item=>{
    return`<li>${item.first}</li>`
  }).join('')
})
